<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 开发版本，可以阅读源码-->
    <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dist/vue.js"></script>-->
    <!-- 生产版本，打包好的 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<!-- 声明式渲染 -->
<div id="application">
    <h1>{{msg}}</h1>
</div>

<script type="text/javascript">
    let viewModel = new Vue({
       el : "#application",
       data : {
           msg : "Hello Vue!!! 你好Vue！！！"
       }
    });
</script>

<!--
    第一个 Vue 应用！
    看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。
    现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。
    我们要怎么确认呢？
    打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

    注意我们不再和 HTML 直接交互了。
    一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。
    那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
-->

</body>
</html>